<link rel="stylesheet" href="plugins/bootstrap-table/bootstrap-table.css">

<div class="row">
	<div class="col-md-12">
		<div class="box box-solid">
			<div class="box-header with-border">
				<h3 class="box-title">
					<i class="fa fa-tag"></i> 用户管理
				</h3>
			</div>
			<div class="box-body">
				<div class="row">
					<div class="col-md-3">
						<div class="input-group">
							<span class="input-group-addon">真实姓名</span> <input type="text" name="realname" class="form-control">
						</div>
					</div>
					<div class="col-md-3">
						<div class="input-group">
							<span class="input-group-addon">用户名</span> <input type="text" name="username" class="form-control">
						</div>
					</div>
					<div class="col-md-3">
						<div class="input-group">
							<span class="input-group-addon">E-mail</span> <input type="text" name="email" class="form-control">
						</div>
					</div>
					<div class="col-md-3">
						<div class="input-group">
							<span class="input-group-addon">性别</span> <input type="text" name="sex" class="form-control">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<table id="table" data-show-export="true" data-height="500"></table>
						
						<div id="toolbar" class="btn-toolbar" role="toolbar">
							<div class="btn-group" role="group">
								<button type="button" class="btn btn-default"
									data-toggle="modal" data-target="#exampleModal">
									<i class="glyphicon glyphicon-plus"></i> 添加
								</button>
								<button type="button" class="btn btn-default">
									<i class="glyphicon glyphicon-trash"></i> 修改
								</button>
								<button id="remove" type="button" class="btn btn-default">
									<i class="glyphicon glyphicon-trash"></i> 删除
								</button>
							</div>
							<div class="btn-group" role="group">
								<button id="resetSearch" type="button" class="btn btn-default">
									<i class="glyphicon glyphicon-trash"></i> 重置
								</button>
								<button id="search" type="button" class="btn btn-default">
									<i class="glyphicon glyphicon-trash"></i> 搜索
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
		
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="exampleModalLabel">New message</h4>
			</div>
			
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="recipient-name" class="control-label">Recipient:</label>
						<input type="text" class="form-control" id="recipient-name">
					</div>
					<div class="form-group">
						<label for="message-text" class="control-label">Message:</label>
						<textarea class="form-control" id="message-text"></textarea>
					</div>
				</form>
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Send message</button>
			</div>
			
		</div>
	</div>
</div>


<script src="/admin/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/admin/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="/admin/plugins/bootstrap-table/extensions/export/tableExport.js"></script>
<script src="/admin/plugins/bootstrap-table/extensions/flat-json/bootstrap-table-flat-json.js"></script>
<script src="/admin/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<style>
	.fixed-table-toolbar .bs-bars{
		line-height: 30px;
	}
</style>
<script>
$(function(){
	$('#myModal').on('shown.bs.modal', function () {
		  $('#myInput').focus()
	});
	
	var url = "http://localhost/user/list" ;
	var t = $('#table').bootstrapTable({
	    url: url,
	    dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
        search: false,//是否搜索
        searchAlign: "right",//查询框对齐方式
        pagination: true,//是否分页
        pageSize: 20,//单页记录数
        pageList: [5, 10, 20, 50],//分页步进值
        sidePagination: "server",//服务端分页
        contentType: "application/json;charset=UTF-8",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
        dataType: "json",//期待返回数据类型
        method: "get",//请求方式
        showColumns: true,  //显示下拉框勾选要显示的列
        showRefresh: true,  //显示刷新按钮
        striped: false,  //表格显示条纹  
        toolbar: "#toolbar",
        uniqueId: "id",
        showToggle: true,
        clickToSelect: true,
        showFooter: true,
        pageSize: 50,
        detailView: true,
        sortName: "username",
        sortable: true,
        
        responseHandler: function(res) {
            return {
				"total": res.data.total,	//总页数
                "rows": res.data.list   	//数据
			};
        },
        queryParamsType : "undefined",
        queryParams: function(params) {
        	params["page"] = params.pageNumber ;
        	params["rows"] = params.pageSize ;
        	params["realname"] = $("input[name=realname]").val() ;
        	params["username"] = $("input[name=username]").val() ;
        	params["email"] = $("input[name=email]").val() ;
        	params["sex"] = $("input[name=sex]").val() ;
        	return params;
        },
        onLoadSuccess: function(data) {
        	//console.info(data);
        },
        onLoadError: function() {
        	//console.info("加载失败...");
        },
	    columns: [{
	    	checkbox: true,
	    }, {
	    	field: 'id',
	        title: 'ID'
	    }, {
	        field: 'username',
	        title: '用户名',
	        sortable: true
	    }, {
	        field: 'realName',
	        title: '真实姓名'
	    }, {
	        field: 'email',
	        title: '邮件地址'
	    }, {
	        field: 'createTime',
	        title: '创建时间'
	    }]
	});
	
	$("#search").click(function() {
		t.bootstrapTable("refresh")
	});
	

	$("#export").click(function() {
		t.tableExport({
			type : 'excel',
			escape : false
		});
	});
	
	function getIdSelections() {
		var ids = t.bootstrapTable('getSelections') ;
		var idsArray = [] ;
		$.map(ids, function(row) {
			console.info(row.id) ;
			idsArray.push(row.id) ;
		})
		return idsArray ;
	}
	
	$("#remove").click(function() {
		var ids = getIdSelections() ;
		t.bootstrapTable("remove", {
			field: "id",
            values: ids
		})
	});
	
	$("#resetSearch").click(function() {
		$("input[name=realname]").val("") ;
		$("input[name=username]").val("") ;
		$("input[name=sex]").val("") ;
    	$("input[name=email]").val("") ;
		t.bootstrapTable("refresh")
	});
	
});
</script>
